import VueRouter from 'vue-router'
import CountComponent from '../pages/Count.vue'
import PersonComponent from '../pages/Person.vue'
import MessageComponent from '../pages/Message.vue'
import NewsComponent from '../pages/News.vue'
import OthersComponent from '../pages/Others.vue'
import DetailComponent from "@/pages/Detail.vue";


const projectRouter = new VueRouter(
    {
        //配置路由的模式 默认为hash模式 可以改为history模式
        //hash模式 会在url中添加# 不会向服务器发送请求 服务器不会知道这个请求
        //history模式 不会在url中添加# 会向服务器发送请求 服务器会知道这个请求
        mode: 'history',
        routes: [
            {
                path: '/count',
                name: 'count',
                component: CountComponent,
                meta: {
                    title: '计数'
                },
            },
            {
                path: '/person',
                name: 'person',
                component: PersonComponent,
                meta: {
                    title: '个人中心'
                },
            }
            ,
            {
                path: '/message',
                name: 'message',
                component: MessageComponent,
                meta: {
                    title: '消息'
                },
                children: [
                    {
                        path: 'news',
                        name: 'news',
                        component: NewsComponent,
                        meta: {
                            isAuth: true,
                            title: '新闻'
                        },
                        /*                    beforeEnter: (to, from, next) => {
                                                let auth = localStorage.getItem('auth') //获取本地存储的权限
                                                if (auth === 'full') {
                                                    next()
                                                    return
                                                }
                                                alert('权限不足')
                                                return;
                                            },*/
                        children: [
                            {
                                //使用params传参 需要在path中使用占位符
                                path: 'detail/:id/:title/:content/:author/:date',
                                name: 'detail',
                                component: DetailComponent,
                                meta: {
                                    isAuth: true,
                                    title: '新闻详情'
                                },
                                //第一种写法 props对象中的所有key-value以props的形式传递给组件
                                // props: {
                                //     a: 1,
                                //     b: 'hello'
                                // }
                                //若props为true 则会把params参数以props的形式传递给组件（query参数无法使用）
                                //props: true
                                //第三种写法 props为函数 可以自定义参数 这种写法可以使用query参数
                                props($route) {
                                    return {
                                        id: $route.params.id,
                                        title: $route.params.title,
                                        content: $route.params.content,
                                        author: $route.params.author,
                                        date: $route.params.date
                                    }
                                }
                            }
                        ]
                    },
                    {
                        path: 'others',
                        name: 'others',
                        component: OthersComponent,
                        meta: {
                            //在meta中配置属性 用于在路由守卫回调函数中判断是否需要鉴权
                            isAuth: true,
                            title: '其他'
                        },
                    }
                ]
            }
        ]
    })

/*
let auth = localStorage.getItem('auth')
//全局前置路由守卫 初始化时调用一次 每次路由切换之前调用一次
projectRouter.beforeEach((to, from, next) => {
    /!*if (to.path === '/message/news' || to.path === '/message/others') {
        if (auth === 'full') {
            next()
            return
        }
        alert('权限不足')
        return;
    }*!/
    if (to.meta.isAuth) {
        if (auth === 'full') {
            next()
            return
        }
        alert('权限不足')
        return;
    }
    next()
})
//全局后置路由守卫 初始化时调用一次 每次路由切换之后调用一次
projectRouter.afterEach((to) => {
    //修改网页的title  路由切换后会自动调用
    document.title = to.meta.title || '默认'
})*/

export default projectRouter
